<template>
	<view style="height: 100vh;overflow: hidden;">
		<view class="ad-1">
			<image src="/static/temp/ad1.jpg" mode="scaleToFill"></image>
		</view>
		<!-- 分类 -->
		<view class="cate-section">
			<view class="cate-item"  @click="cateItem(0)">
				<image src="/static/temp/rzdj.png"></image>
				<text>购物车</text>
			</view>
			<view class="cate-item"  @click="cateItem(1)">
				<image src="/static/temp/zsdj.png"></image>
				<text>我的订单</text>
			</view>
			<view class="cate-item" @click="cateItem(2)">
				<image src="/static/temp/tssq.png"></image>
				<text>我的收藏</text>
			</view>
<!--			<view class="cate-item">-->
<!--				<image src="/static/temp/gongzi.png"></image>-->
<!--				<text>退换/售后</text>-->
<!--			</view>-->
			<!--			<view class="cate-item">-->
			<!--				<image src="/static/temp/zbsq.png"></image>-->
			<!--				<text>装备申请</text>-->
			<!--			</view>-->
<!--			<view class="cate-item">-->
<!--				<image src="/static/temp/c8.png"></image>-->
<!--				<text>用户中心</text>-->
<!--			</view>-->
		</view>
<!--		<view class="mp-search-box">-->
<!--			<input class="ser-input" type="text" value="输入关键字搜索" disabled />-->
<!--		</view>-->
<!--		<view class="mp-search-box"  style="display:flex;align-items: center;">-->
<!--			<span style="line-height: 1;margin-top:10px">-->
<!--				城市：-->
<!--			</span>-->
<!--			<input class="ser-input" style="width:50%;border-radius:10rpx;flex:0.5" type="text" value="请选择城市" disabled />-->
<!--			<view style="display: flex;justify-content: space-around;flex:0.5">-->
<!--				<span style="font-size:24rpx;display: flex;">-->
<!--					销量-->
<!--					<view>-->
<!--							<div class="arrow arrow-up"></div>-->
<!--    					<div class="arrow arrow-down"></div>-->
<!--					</view>-->
<!--			</span>-->
<!--				<span style="font-size:24rpx;display: flex;">-->
<!--					价格-->
<!--					<view>-->
<!--							<div class="arrow arrow-up"></div>-->
<!--    					<div class="arrow arrow-down"></div>-->
<!--					</view>-->
<!--			</span>-->
<!--			</view>-->

<!--		</view>-->
		<view  class="content">
			<scroll-view scroll-y class="left-aside">
				<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}" @click="tabtap(item)">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
				<view v-for="item in slist" :key="item.id" class="s-list" :id="'main-'+item.id">
					<text class="s-item">{{item.name}}</text>
					<view class="t-list">
						<view @click="navToList(titem.equipmentId)" v-if="titem.pid === item.id" class="t-item" v-for="titem in tlist" :key="titem.priceId +'t'">
							<image :src="getUrl(titem.ridersShoppingMatialList)"></image>
							<text>{{titem.equipment}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
import {isEmpty} from "@/utils";

	export default {
		data() {
			return {
				sizeCalcState: false,
				tabScrollTop: 0,
				currentId: 1,
				flist: [],
				slist: [],
				tlist: [],
        goodsList:[],
        proxyUrl:(window.location.href.includes('/xsdcrm-wechat-ui/')?'/xsdcrm-wechat-ui/': ''),

			}
		},
		onLoad(){
			this.loadData();
		},
		methods: {
      cateItem(item){
        console.log('点击功能按钮')
        if (item == 0) {
          uni.navigateTo({
            url: `/pages/cart/webIndex`
          })
        } else if (item == 1){
          uni.navigateTo({
            url: '/pages/order/order'
          })
        } else if (item == 2){
          uni.navigateTo({
            url: `/pages/collect/webIndex`
          })
        }

      },
			async loadData(){






				let carouselList = await this.$API.json('carouselList');
				this.titleNViewBackground = carouselList[0].background;
				this.swiperLength = carouselList.length;
				this.carouselList = carouselList;
				let list = await this.$API.json('cateList');
				// list.forEach(item=>{
				// 	if(!item.pid){
				// 		this.flist.push(item);  //pid为父级id, 没有pid或者pid=0是一级分类
				// 	}else if(!item.picture){
				// 		this.slist.push(item); //没有图的是2级分类
				// 	}else{
				// 		this.tlist.push(item); //3级分类
				// 	}
				// })


        this.flist = [{
          id: 1,
          name: '餐箱'
        },
          {
            id: 2,
            name: '头盔'
          },
          {
            id: 3,
            name: '工服'
          },
          {
            id: 4,
            name: '其他'
          },]

        this.slist = [ 	{
          id: 5,
          pid: 1,
          name: '餐箱'
        },
          {
            id: 6,
            pid: 2,
            name: '头盔'
          }, {
            id: 7,
            pid: 3,
            name: '工服'
          }, {
            id: 8,
            pid: 3,
            name: '其他'
          }]

        let cityId = uni.getStorageSync("city")?uni.getStorageSync("city").cityId:''
        let goodsList = await this.$api.dormitory.equipmentList({cityId:cityId});
          goodsList.rows.forEach(item => {
          if (isEmpty(item.equipment)) return
          if (item.category == 1) {
            item.pid = 5
          } else if (item.category == 2) {
            item.pid = 6
          } else if (item.category == 3) {
            item.pid = 7
          } else {
            item.pid = 8
          }
        })

        this.tlist = goodsList.rows || [];
        console.log(this.tlist)
        // this.slist =


			},
			//一级分类点击
			tabtap(item){
				if(!this.sizeCalcState){
					this.calcSize();
				}

				this.currentId = item.id;
				let index = this.slist.findIndex(sitem=>sitem.pid === item.id);

        console.log(this.slist[index])

				this.tabScrollTop = this.slist[index].top;
			},
			//右侧栏滚动
			asideScroll(e){
				if(!this.sizeCalcState){
					this.calcSize();
				}
				let scrollTop = e.detail.scrollTop;
				let tabs = this.slist.filter(item=>item.top <= scrollTop).reverse();
				if(tabs.length > 0){
					this.currentId = tabs[0].pid;
				}
			},
			//计算右侧栏每个tab的高度等信息
			calcSize(){
				let h = 0;
				this.slist.forEach(item=>{
					let view = uni.createSelectorQuery().select("#main-" + item.id);
					view.fields({
						size: true
					}, data => {
						item.top = h;
						h += data.height;
						item.bottom = h;
					}).exec();
				})
				this.sizeCalcState = true;
			},
      getUrl(list){
        let str
        if (list && list.length>0) {
          str = (process.env.VUE_APP_ENV == 'dev'?'http://testcrm.xinlanrenli.com':this.proxyUrl) +'/profile/'+ list[0].matialUri
        } else {
          str = this.proxyUrl + '/static/zwtp.png'
        }
        console.log(str)
        return str
      },
			navToList(id){
        let cityId = uni.getStorageSync("city")?uni.getStorageSync("city").cityId:''
        uni.navigateTo({
          url: `/pages/product/product?id=${id}&cityId=${cityId}`
        })
			}
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}
	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}
	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;
		&.active{
			color: $base-color;
			background: #f8f8f8;
			&:before{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside{
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
    padding-bottom: 100rpx;
    height: calc(100vh - 440rpx);
	}
	.s-item{
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}
	.t-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;
		&:after{
			content: '';
			flex: 99;
			height: 0;
		}
	}
	.t-item{
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		image{
			width: 140upx;
			height: 140upx;
		}

    text{
      width:100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
	}
	.ad-1{
		width: 100%;
		height: 210upx;
		//padding: 10upx 0;
		background: #fff;
		image{
			width:100%;
			height: 100%;
		}
	}
	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 30upx 22upx;
		background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}

	.mp-search-box{
		//position:absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 10upx;
		.ser-input{
			flex:1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color:$font-color-base;
			margin-top: 10px;
			border-radius: 25px;
			background: rgba(255,255,255,1);
		}
	}

	.arrow {
		position: relative;
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		margin-left: 5rpx;
	}

	.arrow-up {
		margin-top: 5rpx;
		border-bottom: 6px solid #ddd;
	}

	.arrow-down {
		margin-top: 5rpx;
		border-top: 6px solid #ddd;
	}
</style>
